import { useIntersectionObserver } from '@vueuse/core'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const plugin = {
  install(app) {
    // 懒加载
    // - 使用 `<img v-img-plugin="item.picture" />`
    app.directive('img-plugin', {
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersection }]) => {
          // 进入视口区域
          // 才把绑定的值赋值给控件去加载
          if (isIntersection) {
            el.src = binding.value
            stop()
          }
        })
      }
    })
    // icon 图标全局注册
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }
  }
}

export default plugin
